<template>
  <view class="content">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
	<div class="inquiryList-page">
		   <!-- <f-navbar  fontColor="#303133"  bgColor="#fff" navbarType="9" :isChoose="1"></f-navbar> -->
			<u-sticky>
				<div class="inquiryList-top" style="background:#fff" id="inquiryListSearch">
					<div style="padding:24rpx">
						<u-search placeholder="输入牌号/厂家" v-model="keywords" :showAction="false"  @search="searchList"></u-search>
					</div>
					
					<div class="fifter-div">
						<div class="fifter-item" @click="logSave">最新发布</div>
						<div class="fifter-item" @click="showCategory" :style="{color:categoryName == '' ? '#000000' : '#FF5E01'}">
							<span style="vertical-align: middle;">{{categoryName == '' ? '品名' : categoryName}} </span>
							<div style="display: inline-block;margin-left:10rpx;vertical-align: middle;">
								<u-icon name="arrow-down-fill" size="10" color="#929292" v-if="categoryName == ''"></u-icon>
								<u-icon name="close-circle-fill" size="16" color="#FF5E01" v-else @click.native.stop="delcategoryName"></u-icon>
							</div>
						</div>
					</div>
				</div>
			 </u-sticky>
			 
			 <div style="padding:32rpx;padding-bottom:0">
			 	 <u-swiper
			 		radius='18rpx'
			 		keyName="adImage"
			 		:list="adList"
			 		height="196rpx"
			 		@click="clickAD"
			 		indicator
			 		indicatorMode="line"
			 	></u-swiper>
			 </div>
			
			<div class="con-list-div" style="padding:0 32rpx;padding-top:32rpx">
				<div class="inquiry-list-item" v-for="(item,index) in list" :key="item.inquiryId" @click="toInfo(item)" :id="index == 0 ? 'inquiryListBtn' : ''">
					<div class="inquiry-state grey" v-if="item.inquiryState == 40">{{item.inquiryStateStr}}</div>
					<div class="inquiry-state grey" v-else-if="item.inquiryState == 30">{{item.inquiryStateStr}}</div>
					<div class="inquiry-state yellow" v-else>{{item.inquiryStateStr}}</div>
					<div class="box-top">
						<div class="inquiry-item-top">{{item.inquiryTitle}}</div>
						<div class="item-attr">
							<!-- <div class="attr-blur" v-if="item.sendTypes">{{item.sendTypes}}</div> -->
							<div class="attr-yellow" v-if="item.receiveDate">交货日期：{{item.receiveDate}}</div>
						</div>
						<div class="item-cell-div">
							<div class="item-cell" style="display: inline-block;padding-right:40rpx;">
								<span class="label">询价数量：</span>
								<span class="text">{{item.goodsNum ? item.goodsNum : '--'}}吨</span>
							</div>
							<div class="item-cell" style="display: inline-block;">
								<span class="label">询价时间：</span>
								<span class="text">{{item.inquiryTime}}</span>
							</div>
							<div class="item-cell" style="margin-top:10rpx;">
								<span class="label">收货地区：</span>
								<span class="text">{{item.receiveArea}}</span>
							</div>
							<div class="item-cell" style="margin-top:10rpx;">
								<span class="label">交易方式：</span>
								<span class="text">{{item.payTypes}}<span style="padding-left:20rpx">{{item.sendTypes}}</span></span>
							</div>
						</div>
					</div>
					<div class="box-bottom">
						<div class="item-bottom">
							<div style="width:98%;margin:0 auto;border-top:1px solid #DEDEDE;position: absolute;top: 0rpx;left:1%"></div>
							<div class="item-bottom-con">
								<div class="bottom-right" style="text-align: center;">
									<div style="font-size: 28rpx;line-height: 37px;color: #929292;display: inline-block;padding-right:40rpx;" v-if="item.quotationCount == 0">暂无报价</div>
									<div style="width:188rpx;display: inline-block;" v-if="item.isMy != 1 && (item.inquiryState == 10 || item.inquiryState == 20)&& item.myPriceId == ''"><!--&& item.isMy != 1-->
										<u-button text="我要报价" shape="circle"  type="primary" size="small" color="linear-gradient(180deg, #FF5E01 0%, #FF5E01 100%)" @click.native.stop="seeBj('add',item)"></u-button>
									</div>
									<div style="width:188rpx;display: inline-block;" v-if="item.myPriceId != ''">
										<span style="font-size:28rpx;">我已报价</span>
										<!-- <u-button text="修改报价" shape="circle"  type="primary" size="small" color="linear-gradient(180deg, #FF5E01 0%, #FF5E01 100%)" @click.native.stop="seeBj('edit',item)"></u-button> -->
									</div>
									<div style="font-size: 24rpx;line-height: 34rpx;color: #FF5E01;padding-top:10rpx;"  v-if="item.quotationCount > 0 ">
									   查看实时报价{{item.quotationCount}}个
									</div>
								</div>
								<div class="bottom-left">
									<div v-if="item.quotationCount > 0 ">
										<img src="https://pic.moresu.com/FhIJymJEzOU5hoJJ1P8N-WLP1oim" style="position: absolute;width:42rpx;height:37rpx;right:-40rpx;"/>
										<span class="small-txt">￥</span>
										<span class="big-txt">{{item.quotation}}</span>
										<span class="small-txt">/吨</span>
									</div>	
								</div>
								
							</div>
						</div>
					</div>
					
				</div>
			</div>
			<div style="padding-bottom:40rpx;">
			   <u-loadmore :status="status" ></u-loadmore>
			</div>
	</div>
	
    <!--品名-->
	<category ref="category" @chooseItem="chooseCategory"></category>
	
	<!--我要报价-->
	<!-- <addPrice ref="addPrice" @refresh="searchList"></addPrice> -->
	
	<f-tabbar></f-tabbar>
	
	<liu-drag-button :canDocking="false" :bottomPx='170' :rightPx='10'>
		<!-- #ifdef MP -->
		<button style="background: none;" open-type="contact">
			<img src="https://pic.moresu.com/FkBWbqXaE6pGNWH2FPfSZR513GX5" style="width:136rpx;height:134rpx"/>
		</button> 
		<!--#endif -->
		<!-- #ifdef H5 -->
		 <img src="https://pic.moresu.com/FkBWbqXaE6pGNWH2FPfSZR513GX5" style="width:136rpx;height:134rpx" @click="callPhone"/>
		<!--#endif -->
	</liu-drag-button>
	
	<driver-page ref="driverPage"></driver-page>
	
  </view>
</template>

<script>
  import fTabbar from '@/components/module/f-tabbar/f-tabbar';
  import fNavbar from '@/components/module/f-navbar/f-navbar';
  import {getInquiryList,getGuideDataAPI,pageSeo,getBannerList} from '@/config/api.js'
  import category from '@/components/module/category';
  import { shareCode,commonData } from '@/config/api.js'
  // import addPrice from '@/components/module/addPrice';
  import{saveShareUid}  from '@/plugins/utils.js'
  import driverPage from '@/components/driver-page/driver-page';
  import store from '@/store';
  const log = require('@/plugins/log.js')
  export default {
    components: {
      fTabbar,category,fNavbar,driverPage

    },
    data() {
      return {
        keywords:'',
		status: 'loadmore',
		list: [],
		pageNum: 0,
		pageSize:10,
		count:0,
		categoryId:'',
		scrollTop:0,
		categoryName:'',
		shareTitle:'',
		qrCode:'',
		shareImage:'',
		systemInfo:{
		    statusBarHeight:uni.getSystemInfoSync().statusBarHeight,
		    // #ifdef MP-ALIPAY
		    navBarH: uni.getSystemInfoSync().statusBarHeight + uni.getSystemInfoSync().titleBarHeight, //菜单栏总高度--单位px
		    titleBarHeight: uni.getSystemInfoSync().titleBarHeight, //标题栏高度--单位px
		    // #endif
		    // #ifndef MP-ALIPAY
		    navBarH: uni.getSystemInfoSync().statusBarHeight + 44, //菜单栏总高度--单位px
		    titleBarHeight: 44, //标题栏高度--单位px
		    // #endif
		},
		steps:[],
		contactMobile:'',
		adList:[]
      }
    },
	onLoad(options) {
		if(options.scene) { //分享进入
		  var splitStr = unescape(options.scene).split(",");
		  console.log(splitStr)
		  splitStr.forEach((el) => {
			if (el.indexOf('pcode') != -1) {
			  let shareArry = el.split(":");
			  let pcode = shareArry[1];
			  saveShareUid(pcode);
			}
		  });
		}
		console.log("options",options)
		if(options.pcode){
		  saveShareUid(options.pcode)
		}
		this.getCode();
		commonData().then((res)=>{
			this.contactMobile = res.contactMobile
		})
		this.getAdList()
	},
    async onShow(options) {
		// 隐藏原生的tabbar
		uni.hideTabBar();
    	await this.$onLaunched;	
		this.keyword = '';
		this.categoryId = '';
		this.categoryName = '';
		this.count = 0;
		this.clearData();
		this.getList().then(()=>{
			this.$nextTick(()=>{
				getGuideDataAPI({
					pageUrl:'inquiryList'
				}).then((res)=>{
					this.steps=res
					this.$refs.driverPage.showPop(this.steps)
				}).catch((error)=>{
					console.log(error)
				})
			})
		})
		// #ifdef H5
			pageSeo({pageType: 'inquiryListPage'}).then((res)=>{
				document.title = res.pageTitle;
			})
		// #endif
    },
	
	async onShareAppMessage(){
		await this.$onLaunched;
		let storeUserInfo = store.state.userInfo;
		return {
		      title: this.shareTitle,
		      path: '/pages/inquiry/inquiryList?pcode='+storeUserInfo.promoterCode
		    }
	},
	
	onReachBottom() {
		if(this.list.length >= this.count) {
			this.status = 'nomore';
			return ;
		}
		this.pageNum = ++ this.pageNum;
		this.getList()
	},
	onPageScroll(res) {
		this.scrollTop = res.scrollTop
	},
    methods: {
		getAdList(){
		  let adType = 1
		  // #ifdef H5
		  adType = 2
		  // #endif
			
		  getBannerList({source:'inquiryHall',adType:adType}).then((res)=>{
			  this.adList = res.list
		  })
		},
			
		clickAD(index){
			console.log("index",index)
			let item = this.adList[index]
			if(item.adLink){
				uni.navigateTo({
					url: url
				})
			}
		},
		callPhone(){
			uni.makePhoneCall({
				phoneNumber:  this.contactMobile
			});
		},
		logSave(){
			log.info('全部询价&最新发布tab按钮')
		},
		getCode(){
			shareCode({shareType:'inquiryList'}).then((res)=>{
				this.showLime = true
				this.shareTitle = res.shareTitle;
				this.qrCode = res.qrCode;
				this.shareImage = res.shareImage;
			})
		},
		
		toMyInquiry(){
			this.judgeLogin(() => {
				uni.navigateTo({
				  url: '/pagesUser/order/myInquiryList'
				})	
			});
		},
		//显示报价
		seeBj(type,item){
			this.judgeLogin(() => {
				   this.judgeSellerAuth(()=>{
					   if(type == 'add'){
						   uni.navigateTo({
						     url: "/pagesUser/business/editQuotation?type=add&inquiryId=" + item.inquiryId + "&priceNum="+item.goodsNum+'&serviceChargeRatio='+item.serviceChargeRatio+'&serviceType='+item.serviceType+'&payTypes='+item.payTypes+'&sendTypes='+item.sendTypes
						   })
						   log.info('单条询价&我要报价按钮')
						  // this.$refs.addPrice.init(item,type,item.serviceChargeRatio)
					   }else{
						   uni.navigateTo({
						     url: "/pagesUser/business/editQuotation?type=edit&priceId=" + item.myPriceId 
						   })
						  // this.$refs.addPrice.init(item.myPriceId,type,item.serviceChargeRatio)
					   }  
	
				  },'price')
			},'price')
		},
		//删除品名
		delcategoryName(){
			this.categoryId = ''
			this.categoryName = ''
			this.searchList()
		},
		//选择品名
		chooseCategory(e){
			this.categoryId = e.categoryId;
			this.categoryName = e.name;
		    this.searchList()
		},
		//显示品名
		showCategory(){
			this.$refs.category.init();
			log.info('全部询价&品名选择')
		},
		
		toInfo(item){
			uni.navigateTo({
			  url: '/pages/inquiry/inquiryInfo?inquiryId='+item.inquiryId+'&formPath=inquiry'
			})
			log.info('单条询价&查看实时报价按钮')
		},
		searchList(){
			this.clearData();
			this.getList()
			log.info('全部询价&全部询价搜索框&'+this.keywords)
		},
		
		//清除数据
		clearData(){
				this.pageNum = 1;
				this.list = [];
				this.status = 'loadmore';
				this.count = 0;
		},
		getList(){
			let data = {};
			data.pageSize = 10;
			data.pageNum = this.pageNum;
			data.tab = 'all';
			data.keywords = this.keywords;
			data.categoryId = this.categoryId;
			this.status = 'loading';
		    return	getInquiryList(data).then((res)=>{
				this.list = this.list.concat(res.list ? res.list : [] );
				this.count = res.count;
				if(this.list.length >= this.count) {
					this.status = 'nomore';
				}else{
					this.status = 'loadmore';
				}
			}).catch(()=>{
				this.status = 'loadmore';
			})
		},
		
	}
	

  }
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';
.inquiryList-page{
	background: rgb(242,242,242);
	min-height: 100vh;
	.inquiryList-top{
	
		.fifter-div{
			background: #fff;
			padding:10rpx 0;
			@include flexbox(center,center);
			font-size: $m-font;
			line-height: 48rpx;

			box-shadow: 0px 0px 10rpx rgba(0,17,52,0.09);
			.fifter-item{
				text-align: center;
				width:50%;
				position: relative;
			}
			.fifter-item:first-child{
				color:#FF5E01
			}
			.fifter-item:first-child::after{
				content: ' ';
				position: absolute;
				width:1px;
				height:40rpx;
				background: #DEDEDE;
				right:0;
				top:4rpx;
			}
		}
	}
	.con-list-div{
		.inquiry-list-item{
			position: relative;
			margin-bottom:30rpx;
			background: rgba(255,255,255,1);
			box-shadow: 0px 0px 10px rgba(0,17,52,0.09);
			border-radius: 18rpx;
			.inquiry-state{
				position: absolute;
				right:0;
				top:0;
				z-index: 1;
				width: 162rpx;
				height: 75rpx;
				background: #EFF5FF;
				border-radius: 0px 18rpx 0px 18rpx;
				text-align: center;
				color: #FF5E01;
				font-size:$m-font;
				line-height: 75rpx;
			}
			.inquiry-state.grey{
				color: #929292;
				background: #DEDEDE;
			}
			.inquiry-state.yellow{
				color: #FC9500;
				background: #FFF4E5;
			}
			.box-top{
			
				padding:32rpx;
				padding-bottom:40rpx;
				position: relative;
				
			}
			.box-bottom{
				
				padding:0 32rpx 32rpx 32rpx;
				position: relative;
				margin-top:-4rpx;
			}
			.box-top .jiao,.box-bottom .jiao{
			        width: calc(100% - 40rpx);
			        height:20rpx;
			        position:absolute;
			        left: 20rpx;
			    }
			.box-top .jiao{
				background: #fff;
				bottom: -20rpx;
			}
			.box-bottom .jiao{
				background: #fff;
				top: -20rpx;
			}
			.box-top .jiao::before,.box-bottom .jiao::before{
				content:'';
				position:absolute;
				width: 20rpx;
				height: 20rpx;
				left:-20rpx;
			}
			.box-top .jiao::after,.box-bottom .jiao::after{
				content:'';
				position:absolute;
				width: 20rpx;
				height: 20rpx;
				right:-20rpx;
			}
			.box-top .jiao::before{
				background-image: radial-gradient(circle 20rpx at 0 100%,  transparent 100rpx, #fff 50%);
			}
			.box-top .jiao::after{
				background-image: radial-gradient(circle 20rpx at 100% 100%,  transparent 100rpx, #fff 50%);
			}
			.box-bottom .jiao::before{
				background-image: radial-gradient(circle 20rpx at 0 0,  transparent 100rpx, #fff 50%);
			}
			.box-bottom .jiao::after{
				background-image: radial-gradient(circle 20rpx at 100% 0,  transparent 100px, #fff 50%);
			}
				
			.inquiry-item-top{
				font-size: $m-font;
				line-height: 40rpx;
				color: #1E1E1E;
				margin-top:10rpx;
				position: relative;
				font-weight: bold;
				padding-right:180rpx;
			}
			.inquiry-item-top::after{
				content: ' ';
				position: absolute;
				width: 6rpx;
				height: 36rpx;
				background: linear-gradient(180deg, #FF5E01 0%, #FF5E01 100%);
				border-radius: 3rpx;
				overflow: hidden;
				left:-35rpx;
				top:0;
			}
			.item-attr{
				padding:30rpx 0;
				.attr-blur{
					font-size: $s-font;
					line-height: 34rpx;
					color: #FF5E01;
					border-radius: 22rpx;
					background: #EFF5FF;
					padding:4rpx 32rpx;
					display: inline-block;
					margin-right:20rpx;
				}
				.attr-yellow{
					font-size: $s-font;
					line-height: 34rpx;					
					color: #FC9500;
					border-radius: 22rpx;
					background: #FFF4E5;
					padding:4rpx 32rpx;
					display: inline-block;
				}
			}
			.item-cell-div{
				.item-cell{
					font-size:26rpx;
					.label{
						color:#929292
					}
				}
			}
			.item-line{
				height:2rpx;
				background: #DEDEDE;
				width:100%;
			}
			.item-bottom{
				position: relative;
				.item-bottom-con{
					@include flexbox(space-between,center);
					flex-direction:row-reverse;
					padding-top:24rpx;
					.bottom-left{
						position: relative;
						.small-txt{
							color: #1E1E1E;
							font-size:20rpx;
						}
						.big-txt{
							font-size: 48rpx;
							font-weight: bold;
							color: #FF0000;
						}
					}
				}
			}
		}
	
		  
		  
	}
}
 .fixed-btn{
	 position: fixed;
	 right:10rpx;
     bottom:343rpx;
	 text-align: center;
	 z-index: 4;
	 padding-top:30rpx;
	 font-weight: bold;
 }
</style>